import CommonModal from '@/components/CommonModal';
import { Switch, Form, Radio } from 'antd';
import { useState, useEffect } from "react";

export default ({
    visible,
    handleOk,
    handleCancel
}) => {

    const [switchValue, setSwitchValue] = useState(1)
    const [form] = Form.useForm()

    useEffect(() => {
        if (visible) {
          form.resetFields();
        }
      }, [visible])

    //确定按钮
    const onOk = () => {
        form.validateFields().then(val => {
            // sendData(val)
          })
        handleOk(switchValue)
    }
    //取消按钮
    const onCancel = () => {
        handleCancel();
        form.resetFields()
    }


    return (<>
        <CommonModal
            title="批量设置"
            visible={visible}
            width="376px"
            minHeight="100px"
            onOk={onOk}
            onCancel={onCancel}
        >
            <Form
                form={form}
                initialValues={{
                }}
                name='store-notes-modal-form'
            >
                    {/* 统一添加范围 */}
                    {/* <Form.Item label="修改范围" name='range' rules={[{ required: true, message: '请选择' }]}>
                        <Radio.Group>
                            <Radio value="apple">针对勾选项</Radio>
                            <Radio value="pear">针对筛选项</Radio>
                        </Radio.Group>
                    </Form.Item> */}
            </Form>
            <div>
                <div>
                    <span>数据同步开关：</span>
                    <Switch value ={switchValue} defaultChecked={switchValue=='1'?true:false}
                        onChange={() => setSwitchValue(switchValue=='1'?0:1)}
                    />
                </div>
                <div>将对所有勾选的门店进行覆盖式更改</div>
            </div>
        </CommonModal>
    </>)
}